<template>
  <div class="user-setting" v-if="user">
	<shop-header>	
			<h2>设置</h2>	
		</shop-header>
		<div class="content">
			<group gutter="0">
				<cell title="头像" is-link>
					<input type="file" id="changeBtn" accept="image/*" @change="uploadImg($event)">  
					<span class="avatar"><img width="50" height="50" :src="user.avatarUrl"></span>
				</cell>
				<x-input 
				title="用户名" 
				text-align="right" 
				v-model="user.userName"
				:min="1"
				:max="10" 
				placeholder="请输入用户名"></x-input>
				<cell @click.native="showSelSex = true" class="cell-item" title="性别" :value="userInfo.sex" is-link></cell>
				<cell 
				class="cell-item" 
				title="手机" 
				:value="user.mobile"></cell>
				<x-input 
				title="邮箱" 
				text-align="right" 
				v-model="user.email" 
				is-type="email"
				ref="email"
				placeholder="请输入你的邮箱"></x-input>
				<cell class="cell-item" title="收货地址" is-link :link="{ path: '/my/address' }"></cell>
			</group>
		</div>
		<div class="submit-btn">
			<six-button type="danger" @click.native="submit">
				<span>保存</span>
			</six-button>
		</div>
		<avatar :cropper="cropper" ref="cropperFixed" @outImg="getOutImg"></avatar>
	<!-- 选择性别 -->
	<popup v-model="showSelSex">
		<group gutter="0">
	    <radio :options="sexArr" @on-change="sexChange" v-model="userInfo.sex"></radio>
	  </group>
	</popup>	
  </div>
</template>

<script>
import { mapGetters }	from 'vuex'
import { Group, Cell, Radio, Popup, PopupHeader, XInput } from 'vux'
import ShopHeader from '@/components/public/ShopHeader'
import Avatar from '@/components/my/Avatar'
import Split from '@/components/public/Split'
import http from '@/utils/http'

export default {
	components: {
		ShopHeader,
		Group,
		Cell,
		Split,
		Avatar,
		PopupHeader,
		Radio,
		Popup,
		XInput
	},
	data () {
		return {
		cropper: {
			img: '',
			autoCrop: true,
			autoCropWidth: 200,
			autoCropHeight: 200,
			fixedBox: true,
			canMoveBox: false
	  },
	  sexArr: ['男', '女'],
	  isEmail: false,
	  user: null,
	  showSelSex: false
		}
	},
	computed: {
		...mapGetters(['userInfo'])
	},
  methods: {
  	submit () {
  		 this.isEmail = this.$refs.email.valid
  		if (!this.isEmail && this.user.email) {
  			this.$vux.toast.show({
  				type: 'warn',
  				text: '邮箱格式不正确!',
  				width: 'auto',
  				position: 'middle'
  			})
  			return
  		}
  		let params = {
  			userName: this.user.userName,
  			sex: this.user.sex,
  			email: this.user.email
  		}
  		http.post('/api/v1/updateUserInfo', params, false, res => {
	  		if (res.status == 1) {
	  			this.$vux.toast.show({
	  				text: '更新资料成功!',
	  				type: 'success',
	  				width: 'auto',
	  				position: 'middle'
	  			})
	  			setTimeout(() => {
	  				this.$router.push({ path: '/my' })
	  			}, 2000)
	  		}else {
	  			this.$vux.toast.show({
	  				text: res.msg,
	  				type: 'warn',
	  				width: 'auto',
	  				position: 'middle'
	  			})
	  		}
	  	})
  	},
	  // 修改性别
	  sexChange (val) {
	  	this.user.sex = val
	  	this.showSelSex = false
	  },
		// 选择图片
		uploadImg (e) {
		  let file = e.target.files[0]
		  let maxSize = 5120
		  let oBtn = document.getElementById('changeBtn')
		  this.$vux.loading.show({
			text: '加载中'
		  })
		  // 限制上传图片的类型
		  if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
					this.$vux.toast.show({
			  text: '上传的图片格式不正确!',
			  position: 'bottom',
			  type: 'text',
			  width: 'auto'
			})
					return false
				}
				// 清除原来的value值
				oBtn.value = ''
				// 限制上传图片的大小
				if (file.size > maxSize * 1024) {
					this.$vux.toast.show({
			  text: '上传的图片不能大于2M!',
			  position: 'bottom',
			  type: 'text',
			  width: 'auto'
			})
					return false
				}
		  let reader = new FileReader()
		  reader.onload = (e) => {
			let data
			this.$vux.loading.hide()
			if (typeof e.target.result === 'object') {
			  data = window.URL.createObjectURL(new Blob([e.target.result]))
			}else {
			  data = e.target.result
			}
			this.cropper.img = data
			this.$refs.cropperFixed.back()
		  }
		  reader.readAsArrayBuffer(file)
		},
		// 获取传递的裁剪url blob地址
		getOutImg (url) {
			this.user.avatarUrl = url
		}
  },
  mounted () {
  	this.user = this.userInfo
  }
}
</script>

<style scoped>
.avatar {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	overflow: hidden;
}
#changeBtn {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	opacity: 0;
}
.cell-item {
	padding: 12px 15px !important;
}
.exit-btn {
	padding: 10px 15px;
}
.exit-btn button {
	width: 100%;
	height: 42px;
	color: #fff;
}
.submit-btn {
	padding: 20px 15px 0 15px;
}
.six-button span {
	display: block;
}
</style>
